<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>人脸采集</title>
	<style>
	@CHARSET "UTF-8";
html {
	width: 100%;
	height: 100%;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
 
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: "微软雅黑", 'microsoft yahei', Arial, sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* background: url('../img/face4.png') no-repeat center center; */
	background-size: cover;
	opacity: 0.9
}
 
img {
	border: 0 none;
	max-width: 100%;
	height: auto;
	width: auto;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
}
 
.box {
	width: 100%;
	height: 100%;
}
 
#finger {
	width: 100%;
	height: 180px;
	position: absolute;
	text-align: center;
}
 
#finger_box {
	width: 100%;
	height: 100%;
	position: relative;
}
 
#line {
	width: 100%;
	height: 27px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -50%;
	display: none;
	-webkit-animation: line 1.4s infinite;
	animation: line 1.4s infinite;
}
 
#info {
	width: 100%;
	height: 30px;
	line-height: 30px;
	color: #000;
	font-size: 3.6em;
	font-family: "微软雅黑", 'microsoft yahei', Arial, sans-serif;
}
 
@keyframes line {
	0% {
		transform: translateY(-400px);
	}
 
	50% {
		transform: translateY(400px);
	}
 
	100% {
		transform: translateY(-400px);
	}
}
 
@-webkit-keyframes line {
	0% {
		-webkit-transform: translateY(-400px);
	}
 
	50% {
		-webkit-transform: translateY(400px);
	}
 
	100% {
		-webkit-transform: translateY(-400px);
	}
}
 
.center {
	position: absolute;
	top: calc(50% - 80px);
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 999999;
}
 
.center1 {
	margin-top: 200px;
	width: 100%;
	text-align: center;
	z-index: 999999;
}
 
.overLoading {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	opacity: 0.5;
	z-index: 1000;
}
 
.layoutLoading {
	display: none;
	position: absolute;
	top: 40%;
	left: 40%;
	width: 20%;
	height: 20%;
	z-index: 1001;
	text-align: center;
}
	</style>
	   <link rel="stylesheet" href="css/style.css" />
		<script src="js/jquery.min.js"></script>
		
	</head>
	<body>
		<div  class="center1">
			<p id="info">正在检测...</p>
		</div>
		<div id="faceImg"  class="center">	
			<div id="finger_box">
				<img id="line" src="img/line1.png" style="opacity :0.5" />		
			</div>
		</div>
		
	</body>
		<script>
			var $info=$('#info'),$line=$('#line');
			$(function(){
				setTimeout(
					"$info.stop().text('请眨眨眼')"
				,2000)
				
				$line.stop().show();
			});
		</script>
	
</html>